/**
 * 按钮组件样式
 * @description 自定义按钮组件的样式定义
 */

.button {
  /* 基础样式 */
  transition: all 0.3s ease-in-out;
  border-radius: 6px;
  font-weight: 500;
  
  /* 确保按钮内容居中 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 圆形按钮 */
.button.round {
  border-radius: 50px;
}

/* 方形按钮 */
.button.square {
  border-radius: 0;
}

/* 次要按钮样式 */
.button.secondary {
  background-color: #f5f5f5;
  border-color: #d9d9d9;
  color: #595959;
}

.button.secondary:hover {
  background-color: #e6f7ff;
  border-color: #91d5ff;
  color: #1890ff;
}

.button.secondary:focus {
  background-color: #e6f7ff;
  border-color: #40a9ff;
  color: #1890ff;
}

/* 成功按钮样式 */
.button.success {
  background-color: #f6ffed;
  border-color: #b7eb8f;
  color: #52c41a;
}

.button.success:hover {
  background-color: #52c41a;
  border-color: #52c41a;
  color: #ffffff;
}

.button.success:focus {
  background-color: #73d13d;
  border-color: #73d13d;
  color: #ffffff;
}

/* 警告按钮样式 */
.button.warning {
  background-color: #fffbe6;
  border-color: #ffe58f;
  color: #faad14;
}

.button.warning:hover {
  background-color: #faad14;
  border-color: #faad14;
  color: #ffffff;
}

.button.warning:focus {
  background-color: #ffc53d;
  border-color: #ffc53d;
  color: #ffffff;
}

/* 信息按钮样式 */
.button.info {
  background-color: #e6f7ff;
  border-color: #91d5ff;
  color: #1890ff;
}

.button.info:hover {
  background-color: #1890ff;
  border-color: #1890ff;
  color: #ffffff;
}

.button.info:focus {
  background-color: #40a9ff;
  border-color: #40a9ff;
  color: #ffffff;
}

/* 禁用状态 */
.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 加载状态 */
.button :global(.ant-btn-loading-icon) {
  margin-right: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .button {
    min-height: 40px;
    padding: 0 16px;
    font-size: 16px;
  }
}

/* 深色主题适配 */
[data-theme='dark'] .button.secondary {
  background-color: #262626;
  border-color: #434343;
  color: #d9d9d9;
}

[data-theme='dark'] .button.secondary:hover {
  background-color: #111b26;
  border-color: #177ddc;
  color: #177ddc;
}

[data-theme='dark'] .button.success {
  background-color: #162312;
  border-color: #274916;
  color: #49aa19;
}

[data-theme='dark'] .button.warning {
  background-color: #2b2111;
  border-color: #613400;
  color: #d89614;
}

[data-theme='dark'] .button.info {
  background-color: #111b26;
  border-color: #153450;
  color: #177ddc;
}